<script>
export default {
  name: 'Right',
}
</script>

<template>
  <Card style="height: 546px">
    <p class="title">程序员需求人数</p>
    <div class="header row">
      <span class="col col-1">时间</span>
      <span class="col col-2">地址</span>
      <span class="col col-1">需求人数</span>
    </div>
    <div class="content" ref="contentRef">
      <div class="content-wrap" ref="contentWrapRef"
      :style="{transform: `translateY(${transformY}px)`}">
        <div class="row" v-for="item in list" :key="item.id">
          <div class="col col-1">{{ item.date }}</div>
          <div class="col col-2">{{ item.address }}</div>
          <div class="col col-1">{{ item.num }}</div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import Card from '@/components/Card/index.vue'
import MySocket from "@/utils/web-socket";

const list = ref([])

onMounted(async () => {
  new MySocket((e) => {
    if (e.data === "pong") return;
    const data = JSON.parse(e.data);
    list.value = list.value.concat(data);
    if (list.value.length >= 20) {
      start();
    }
  });
});

const transformY = ref(0)
const contentRef = ref()
const contentWrapRef = ref()
let timer = null
function start() {
  if (timer) {
    clearInterval(timer)
  }
  timer = setInterval(() => {
    let y = transformY.value;
    y -= 0.5
    // 能滚动的最大值
    const max = contentWrapRef.value.clientHeight- contentRef.value.clientHeight
    // 如果已经滚动到或超过最大值, 停止滚动(清除定时器)
    if (-y >= max) {
      clearInterval(timer);
      timer = null
    } else { // 否则继续滚动
      transformY.value = y;
    }
  }, 1000/60);
}

onBeforeUnmount(()=> {
  clearInterval(timer)
})
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0;
}

.header {
  margin: 0 10px;
  background-color: rgba(255, 255, 255, 0.1);
  .col {
    color: #68d8fe;
  }
}

.content {
  margin: 0 10px;
  height: calc(100% - 68px);
  overflow: hidden;
}
.row {
  display: flex;
  padding: 4px 0;
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #68d8fe;
  }
  .col {
    color: #fff;
    text-align: center;
    font-size: 12px;
    color: #61a8ff;
    transform: scale(0.8);
  }
  .col-1 {
    flex: 1;
  }
  .col-2 {
    flex: 2;
  }
}

</style>
